<template>
	<view class="main">
		<view class="address" @click="productDetail">
			<view class="address-text">
				<!-- <image :src="detail.image" mode="aspectFill" /> -->
				<view class="address-name">
					{{detail.name}}
				</view>
			</view>
			<view class="" style="display: flex;">
				<u-icon v-if="ids!=0" name="arrow-right" />
			</view>
		</view>
		<!-- <view class="name">
			{{detail.name}}
		</view> -->
		<view class="box">
			<view class="box-text">
				<view class="" style="margin-bottom: 10rpx;">
					<view class="" style="width: 40rpx;">
						<image src="https://qny.yijiumy.com/ydd/time1.png" style="margin-top: 1.5rpx;" />
					</view>
					
					<view class="" style="line-height: 33rpx;">
						{{detail.dayTime}}
					</view>
					
				</view>
				
				<view class="">
					<view class="" style="width: 40rpx;">
						<image src="https://qny.yijiumy.com/ydd/tmp/orientation.png" style="margin-top: 1.5rpx;"  />
					</view>
					
					<view class="" style="line-height: 33rpx;">
						{{detail.address || detail.detailedAddress}}
					</view>
					

				</view>
			</view>
			<view class="text-icon">
				<view class="Navigation" @click="Navigation()">
					<image src="https://qny.yijiumy.com/ydd/tmp/Navigation.png" /> 
					<view class="" >
						导航
					</view>
				</view>
				<u-line direction="col" length='90rpx'></u-line>
				<view  class="Navigation" @click="makePhoneCall(detail.phone)">
					<image src="https://qny.yijiumy.com/ydd/tmp/telephone.png" /> 
					<view class="">
						联系
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	  goToHear
	} from "@/utils/openLocation.js";
	export default {
		name:"BusinessCard",
		props:['ids','detail'],
		// {
		//   detail: {},
		//   id:''
		// },
		data() {
			return {};
		},
		mounted() {
			
		},
		methods:{
			Navigation(){
				goToHear(this.detail.latitude, this.detail.longitude)
			},
			productDetail(){
				if(this.ids!=0){
					this.$yrouter.push({
					path:"/businessPack/pages/business/details/index",
					query:{
						id:this.detail.id,
						latitude:this.detail.latitude,
						longitude:this.detail.longitude,
					}
					})
				}
				
				
			},
			makePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.main{
		margin: 20rpx auto;
		width: 95%;
		// height: 270rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
	}
	.name{
		margin-bottom: 20rpx;
	}
	.box{
		display: flex;
		justify-content: space-between;
		width: 100%;
		.box-text{
			width: calc(100% - 150rpx ) ;
			font-size: 25rpx;
			color:#8a8a8a;
			line-height: 45rpx;
			>view{
				display: flex;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
		.text-icon{
			color:#8a8a8a;
			.Navigation{
				// border-right: #8a8a8a solid 2rpx;
				width: 85rpx;
				text-align: center;
				font-size: 25rpx;
				margin: 0 10rpx;
				// margin-left: 20rpx;
				// display: flex;
				// justify-content: center;
			}
			display: flex;
			justify-content: space-between;
			width: 185rpx;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.address{
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		width: 100%;
		margin-bottom: 10rpx;
		.address-text{
			display: flex;
			line-height: 60rpx;
			.address-name{
				font-weight: bold;
				font-size: 35rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
		
	}
</style>